<template>
	<div>
		<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
		<!--<div style="padding: 20px;">-->
			<!--纵向得分页面-->
			<!--<div style="margin:5px 0px 0px 0px;background-color: #f5f5f5;padding: 20px;">
				<Row >
			        <Col span="24" style="text-align: left;">
						<span style="font-size: 18px;color: #1a1a1a;font-weight: 540;">评价名称：{{excelname}}</span>
					</Col>
				</Row>
				<Row style="margin:15px 0px 0px 0px;color: #666666;">
			        <Col span="6" style="text-align: left;">
						<span style="font-size: 16px;">年级：{{gradeName}}</span>
					</Col>
					<Col span="6" style="text-align: left;">
						<span style="font-size: 16px;">基数：{{baseExamName}}</span>
					</Col>
					<Col span="6" style="text-align: left;">
						<span style="font-size: 16px;">本次：{{thisExamName}}</span>
					</Col>
					<Col span="6" style="text-align: left;">
						<span style="font-size: 16px;">时间：{{createTime}}</span>
					</Col>
				</Row>
			</div>-->
		    
		<!--</div>-->
		<Row style="padding: 20px;">
	        <Col span="24" style="text-align: left;margin-top:15px;">
	        	<span>班级筛选：</span>
	        	<RadioGroup  v-model="classesselect" type="button" @on-change="classeschangeselect">
	        		<Radio v-for="item in classeslist" :key="item.value" :label="item.value">{{item.label}}</Radio>
			       
			    </RadioGroup>
	        </Col>
	    </Row>
		<Row style="text-align: left;margin-top: 20px;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">纵向得分</span>
		</Row >
		
		<div style="padding: 20px;">
			<!--纵向得分页面-->
			
		    <!--<Row >
		        <Col span="24" style="text-align: right;margin-bottom:10px;">
		        	<Button style="background-color: #4496fc;" size="small" :loading="loading" @click="exportexl">
		        		<span v-if="!loading"><img style="width: 20px;margin-top: 2px;" src="../../../../../../static/img/export.png" alt="" /></span>
				        <span v-else>加载中</span>
		        	</Button>
		        </Col>
		    </Row>-->
			<v-table style="width:100%;margin-top: 20px;" :min-height='500' :is-loading="loadingShow" is-horizontal-resize  is-vertical-resize row-click-color="#3dd9cc29"  :columns="columns" :table-data="tableData" ></v-table>
			<!--<Button @click="handleDownload">导出xls</Button>-->
		</div>
		<Row style="text-align: left;margin-top: 41px;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">纵向比较</span>
		</Row >
		<Row style="padding: 20px;">
	        <Col span="24" style="text-align: left;margin-top:15px;">
	        	<span>科目筛选：</span>
	        	<RadioGroup  v-model="subjectselect" type="button" @on-change="subjectChangeSelect">
	        		<Radio v-for="item in subjectlist" :key="item.value" :label="item.value">{{item.label}}</Radio>
			       
			    </RadioGroup>
	        </Col>
	    </Row>
	    <div style="padding: 20px;position: relative;min-height: 600px;">
	    	<div v-if="changeDetailInfo.length == 0?false:true" style="position: absolute;z-index: 999;width: 100%;height: 100%;background-color: rgba(255,255,255,0.8);">
	        	<div   style="left: 50%;margin-left: -340px;border-radius: 10px;position: absolute;z-index: 1000;background-color: white;border: 1px solid #e9eaec;padding: 0px 20px 20px 20px;">
		      		<div style="font-size: 16px;margin-top: 5px;">人数明细</div>
		      		<i style="font-size: 15px;position: absolute;right: 20px;top: 16px;" @click="changeDetailInfo=[]" class="iconfont alicon-close_light"></i>
		      		
		      		<div style="width: 600px;">
		      			<Row style="margin:0 auto;margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:5px;color: #666666;border-radius: 12px;background-color: #f0f8ff;">
					        <Col span="6" style="text-align: center;">
								<span style="font-size: 16px;">班级</span>
							</Col>
							<Col span="6" >
								<span style="font-size: 16px;">姓名</span>
							</Col>
							<Col span="6" style="text-align: center;">
								<span style="font-size: 16px;">基数所在层次</span>
							</Col>
							<Col span="6" style="text-align: center;">
								<span style="font-size: 16px;">本次所在层次</span>
							</Col>
						</Row>
						<div  style="max-height: 400px;overflow-y: scroll;">
							<Row v-for="item in changeDetailInfo" :key="item.studentId" style="margin:0 auto;color: #666666;margin: 5px 20px 5px 20px;padding:5px 0px 5px 0px;border-bottom: 1px solid rgb(240, 248, 255);">
						        <Col span="6" style="text-align: center;">
									<span style="font-size: 16px;">{{item.classesNo}}</span>
								</Col>
								<Col span="6" >
									<span style="font-size: 16px;">{{item.studentName}}</span>
								</Col>
								<Col span="6" style="text-align: center;">
									<span style="font-size: 16px;">{{item.baseVGrade}}</span>
								</Col>
								<Col span="6" style="text-align: center;">
									<span style="font-size: 16px;">{{item.thisVGrade}}</span>
								</Col>
							</Row>
						</div>
		      		</div>
		      	</div>
	        </div>
			<v-table  :column-cell-class-name="columnCellClass" :row-click='geiDetailInfo' :min-height='500' :is-loading="loadingShow2" style="width:100%"  is-horizontal-resize is-vertical-resize :title-rows="titleRows2" :columns="columns2" :table-data="tableData2" :cell-merge="cellMerge2"></v-table>
	    </div>
	    
	</div>
</template>


<script>
	import api from "@/components/js/Apidomain.js"
	import { getsessionstorage } from '@/components/js/Localstorage'


	export default{
		
		data(){
			return{
				classesselect:"",
				classeslist:[],
				
				subjectselect:"",				//选择的科目
				subjectlist: [],
				
				changeDetailInfo:[],		//点击横向上升下降明细信息
				
//				excelname:"",			//查询的名字
//				gradeName:"",			//查询的年级
//				baseExamName:"",		//查询的基数考试名字
//				thisExamName:"",		//查询的本次考试名字
//				createTime:"",			//查询的评价时间
				
				loadingShow:false,				//表格获取的加载中显示隐藏
				loadingShow2:false,				//表格获取的加载中显示隐藏
				loading: false,				//下载模板按钮上的加载中显示隐藏
				
				columns: [
					{field: 'classesNo', title:'班级', width: 95, titleAlign: 'center',columnAlign:'center',isResize:true},
                    {field: 'chiResults', title:'语文(20)', width: 95, titleAlign: 'center',columnAlign:'center',isResize:true},
                    {field: 'mathResults', title: '数学(20)', width: 95, titleAlign: 'center',columnAlign:'center',isResize:true},
                    {field: 'engResults', title: '英语(20)', width: 95, titleAlign: 'center',columnAlign:'center',isResize:true},
                    {field: 'phyResults', title: '物理(20)', width: 95, titleAlign: 'center',columnAlign:'center',isResize:true},
                    {field: 'chemResults', title: '化学(20)', width: 95, titleAlign: 'center',columnAlign:'center',isResize:true},
                    {field: 'bioResults', title: '生物(20)', width: 95, titleAlign: 'center',columnAlign:'center',isResize:true},
                    {field: 'polResults', title: '政治(20)', width: 95, titleAlign: 'center',columnAlign:'center',isResize:true},
                    {field: 'hisResults', title: '历史(20)', width: 95, titleAlign: 'center',columnAlign:'center',isResize:true},
                    {field: 'geoResults', title: '地理(20)', width: 95, titleAlign: 'center',columnAlign:'center',isResize:true}
                ],
                tableData: [],
                
                
                titleRows2: [
                             [{fields: ['classesNo'], title: '班级', titleAlign: 'center', rowspan: 2,colspan: 1},
                              {fields: ["levelName"], title: '层级', titleAlign: 'center', rowspan: 2,colspan: 1},
                              {fields: ["baseValue"], title: '基数人数', titleAlign: 'center', rowspan: 2,colspan: 1},
                              {fields: ["thisValue"], title: '本次人数', titleAlign: 'center', rowspan: 2,colspan: 1},
                              
                              {fields: ['thisUp', 'keepThis','thisDown'], title: '本层级升降情况(点击表中数字可查看详情)', titleAlign: 'center', colspan: 3},
                              {fields: ['upThis', 'downThis'], title: '其他层级升降情况(点击表中数字可查看详情)', titleAlign: 'center', colspan: 2},
                              
                            ],
                            [	
                            	{fields: ['thisUp'], title: '本层级向上提升', titleAlign: 'center'},
                              	{fields: ['keepThis'], title: '本层级保持', titleAlign: 'center'},
                              	{fields: ['thisDown'], title: '本层级向下降低', titleAlign: 'center'},
                              	{fields: ['upThis'], title: '其他层级上升至本层', titleAlign: 'center'},
                              	{fields: ['downThis'], title: '其他层级下降至本层', titleAlign: 'center'},
                              	
                            ],

                             
                ],
                columns2: [
                    {field: 'classesNo', width: 80, titleAlign: 'center', columnAlign: 'center',},
                    {field: 'levelName', width: 80, titleAlign: 'center', columnAlign: 'center',},
                    {field: 'baseValue', width: 80, titleAlign: 'center', columnAlign: 'center',},
                    {field: 'thisValue', width: 80, titleAlign: 'center', columnAlign: 'center',},
                    
                    
                    {field: 'thisUp', width: 50, columnAlign: 'center',isResize:true,titleCellClassName:'title-cell-class-name-test'},
                    {field: 'keepThis', width: 50, columnAlign: 'center' ,isResize:true},
                    {field: 'thisDown', width: 50, columnAlign: 'center' ,isResize:true},
                    {field: 'upThis', width: 50, columnAlign: 'center' ,isResize:true},
                    {field: 'downThis', width: 50, columnAlign: 'center',isResize:true},
                    
                    
                    
                ],
                tableData2: [
//                      {"classesNo":"1班","levelName":"A层","thisGradeName":"A数","baseChiNum":"50","thisChiNum":"183","baseMathNum":"zhao","thisMathNum":"1561987","baseEngNum":"钢琴唱歌","thisEngNum":"黄浦区金陵东路569号17楼"},  
                ],
                
                

			}
		},
		components:{
			
		},
		created(){
			this.getTchClassesSelect()
		},
		mounted(){
			
			
			
//			this.excelname = getsessionstorage('excelname')
//			this.gradeName = getsessionstorage('gradeName')
//			this.baseExamName = getsessionstorage('baseExamName')
//			this.thisExamName = getsessionstorage('thisExamName')
//			this.createTime = getsessionstorage('createTime')

		},
		computed: {
			
		},
		methods:{
			classeschangeselect:function(){
				this.gettablelist();
				this.gettablelist2();
			},
			getTchClassesSelect:function(){
				let sessionGradeId = getsessionstorage('gradeId');
           		var self = this;
            	let url = api.apidomain+'/tqes/web/tchTeacherEdition/getTchClassesSelect';
            	this.$http.post(url, {"gradeId":sessionGradeId}).then(function(response) {
					if(response.data.success == true){
						
//						console.log(response.data.data)
						self.classeslist = response.data.data
						if(self.classeslist.length != 0){
							self.classesselect = self.classeslist[0].value;
							self.getsubjectlist();
							self.gettablelist();
						}
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00306',
							duration: 10,
							closable: true
						});
					});
			},
			getsubjectlist:function(){
           		this.subjectlistshow = true;
           		let sessionroleid = getsessionstorage('roleid');
           		var self = this;
            	let url = api.apidomain+'/tqes/web/quaPerformance/getSubjectByAd/'+sessionroleid;
            	this.$http.post(url, {}).then(function(response) {
					if(response.data.success == true){
						
//						////console.log(response.data.data)
						self.subjectlist = response.data.data
						if(self.subjectlist.length != 0){
							self.subjectselect = self.subjectlist[0].value;
							self.gettablelist2();
						}
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00197',
							duration: 10,
							closable: true
						});
					});
           	},
			subjectChangeSelect:function(){
				this.gettablelist2()
			},
			gettablelist:function(){
				let sessionroleid = getsessionstorage('roleid');
				let sessionperformId = getsessionstorage('performId')
				if(sessionroleid && sessionperformId){
					
					var senddata = {
	 					"performId":sessionperformId, //绩效id
						"roleId":sessionroleid,//角色id
						"classesIdSelect":this.classesselect//班级id 注意：字段名是classesIdSelect
					}
					
					this.loadingShow = true;
					var self = this;
	            	let url = api.apidomain+'/tqes/web/quaVerticalResults/getVerticalResultsNew';
	            	this.$http.post(url,senddata).then(function(response) {
						if(response.data.success == true){
							self.loadingShow = false;
//		            		////console.log(response.data.data)
							self.tableData = response.data.data
			            }else if(response.data.success == false){
			            		self.loadingShow = false;
			            		self.$Message.error({
									content: response.data.msg,
									duration: 10,
									closable: true
								});
			            	}
			            })
						.catch(function(error) {
							self.loadingShow = false;
							self.$Message.error({
								content: '系统发生错误：错误码00178',
								duration: 10,
								closable: true
							});
						});
				}else{
					self.$Message.error({
							content: '系统发生错误：错误码00179',
							duration: 10,
							closable: true
						});
				}
			}, 
			exportexl:function(){
			
				let sessionroleid = getsessionstorage('roleid');
				let sessionperformId = getsessionstorage('performId');
				
				if(sessionroleid && sessionperformId){
					this.loading = true;
				
					var self = this;
	            	let url = api.apidomain+'/tqes/web/quaVerticalResults/exportExcelDto/'+sessionperformId+'/'+sessionroleid;
	            	this.$http.post(url).then(function(response) {
						if(response.data.success == true){
	//						////console.log(response.data.data)
							window.location.href = response.data.data;
							self.loading = false;
		            }else if(response.data.success == false){
		            		self.loading = false;
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
		            	}
		            	
					})
					.catch(function(error) {
						self.loading = false;
						self.$Message.error({
							content: '系统发生错误：错误码00180',
							duration: 10,
							closable: true
						});
					});
				}
			},
			
			
			
			gettablelist2:function(){
				let sessionroleid = getsessionstorage('roleid');
				let sessionperformId = getsessionstorage('performId')
				
				var senddata = {
					"subject":this.subjectselect , //科目
					"performId":sessionperformId,//绩效Id
					"roleId":sessionroleid,//角色id
					"classesId":this.classesselect//班级id
				}
				
				if(sessionroleid && sessionperformId){
					this.loadingShow2 = true;
					var self = this;
	            	let url = api.apidomain+'/tqes/web/quaVerticalChange/getVerticalChangeNew';
	            	this.$http.post(url,senddata).then(function(response) {
						if(response.data.success == true){

//		            		console.log(response.data.data)
							
							
							self.tableData2 = response.data.data;
							self.loadingShow2 = false;
			            }else if(response.data.success == false){
			            		self.loadingShow2 = false;
			            		self.$Message.error({
									content: response.data.msg,
									duration: 10,
									closable: true
								});	
			            	}
			            })
						.catch(function(error) {
							self.loadingShow2 = false;
							self.$Message.error({
								content: '系统发生错误：错误码00307',
								duration: 10,
								closable: true
							});
						});
				}else{
					self.$Message.error({
							content: '系统发生错误：错误码00308',
							duration: 10,
							closable: true
						});
				}
			},
			cellMerge2(rowIndex,rowData,field){
//				console.log(rowIndex);
//				console.log(rowData.upDownValue);
//				console.log(field);
				if(field == 'thisValue'){
					if(parseInt(rowData.upDownValue) > 0){
						return {
							colSpan:1,
		                    rowSpan:1,
		                    content: '<span >'+rowData.thisValue+'<span style="color:green;font-size:16px;">&nbsp;↑</span>'+'</span>',
						}
					}else if(parseInt(rowData.upDownValue) < 0){
						return {
							colSpan:1,
		                    rowSpan:1,
		                    content: '<span >'+rowData.thisValue+'<span style="color:red;font-size:16px;">&nbsp;↓</span>'+'</span>',
						}
					}
				}
				
			},
			columnCellClass:function(rowIndex,columnName,rowData){
				if (columnName==='thisUp'){
                    return 'clickClass';
                }
				if (columnName==='downThis'){
                    return 'clickClass';
                }
				if (columnName==='upThis'){
                    return 'clickClass';
                }
				if (columnName==='keepThis'){
                    return 'clickClass';
                }
				if (columnName==='thisDown'){
                    return 'clickClass';
                }
			},
			geiDetailInfo:function(rowIndex,rowData,column){
//				console.log(rowIndex);
//				console.log(rowData);
//				console.log(column.field);
				let sessionroleid = getsessionstorage('roleid');
				let sessionperformId = getsessionstorage('performId');
				
				var senddata = {
					"subject":this.subjectselect , 									//科目
					"performId":sessionperformId,		//绩效Id
					"roleId":sessionroleid,							//角色id
					"classesId":rowData.classesId,		//班级id
					"levelCode":rowData.levelCode,									//层级号  本记录有这个值
					"upDownType":column.field,								//升降类型 就是字段名值
				}
				
				var self = this;
				let url = api.apidomain+'/tqes/web/quaVerticalChange/getVerticalChangeDetailNew';
            	this.$http.post(url,senddata).then(function(response) {
					if(response.data.success == true){
						
//						console.log(response.data.data)
						if(response.data.data.length == 0){
							self.$Message.error({
								content: '此条暂无数据，请选择其他条查看',
								duration: 10,
								closable: true
							});
							return;
						}
						self.changeDetailInfo = [];
						self.changeDetailInfo = response.data.data;
						
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00293',
							duration: 10,
							closable: true
						});
					});
				
			},
		  	
			
			
			
			
		}
	}
</script>

<style>
	.clickClass{
    	color: #57a3f3;
    	cursor: pointer;
    }
</style>